var Datas
var LeftScroll
$(function () {
  init();

  function init() {
    setHTML();
    getEvent();
    getCategories()
  }

  // 根据屏幕的宽度动态设置html标签的fontsize
  function setHTML() {
    // 设计的宽度 / 基础值 = 要适配的屏幕的宽度 / fz
    // fz=要适配的屏幕的宽度*基础值/设计的宽度
    // 基础值
    var baseVal = 100;
    // 设计稿的宽度
    var pageWidth = 375;
    // 当前屏幕的宽度
    var screenWidth = document.querySelector("html").offsetWidth;
    // 要设置fontsize
    var fz = screenWidth * baseVal / pageWidth;

    // 赋值给HTML标签
    document.querySelector("html").style.fontSize = fz + "px";
  }
  window.onresize = function () {
    setHTML();
  }

  function getEvent(){
    // li是动态生成的，所以要委托事件
    $(".left").on("tap","li",function(){
      var index = $(this).data("index");
      // console.log(index);
      // 根据索引显示有侧数据
      $(this).addClass("active").siblings().removeClass("active");
       // 往上滚动置顶(需要声明全局变量，在getCategories中有)
       LeftScroll.scrollToElement(this);
       rightList(index);
    })
  }

  function getCategories() {
    // http://api.pyg.ak48.xyz/api/public/v1/categories
    $.ajax({
      type: "get",
      url: "categories",
      data: "",
      dataType: "json",
      success: function (res) {
        // console.log(res.data);
        var arr = template('getCategories', {
          "data": res.data
        });
        // console.log(arr);
        $(".left ul").html(arr);
        LeftScroll = new IScroll(".left");
        // 因为rightList没有res,要用全局变量传入res
        Datas = res.data; 
        // 渲染大家电页面（索引为0）
        rightList(0);
      }
    })
  }

  // 渲染右边页面
  function rightList(index){
    var data = Datas[index].children;
    // console.log(data);
    var arr = template('getRightlist', {
      "data": data
    });
    // console.log(arr);
    $(".right").html(arr);
    // 当页面中图片加载完毕之后添加iscoll插件
    // 因为如果直接new IScroll(".right")，有多少张图片就会初始化多少次，浪费资源，要优化！
    // 统计图片张数，每加载完一张减1，等到所有图片都加载完毕之后，初始化
    var nums = $(".right img").length;
    // console.log(nums);
    
    $(".right img").on("load",function(){
      nums--;
      if(nums==0){
        new IScroll(".right");
      }
    })
  }
})